<template>
  <div class="sigin-in-subscribe-details">
    <c-title text="提现记录"></c-title>
    <ul class="list">
      <li class="flex-2 f-26">时间</li>
      <li class="flex-1 f-26">金额</li>
      <li class="flex-1 f-26">手续费</li>
      <li class="flex-1 f-26">状态</li>
    </ul>
    <main class="main" v-if="list && list.length !== 0">
      <div class="box" v-for="(item, i) in list" :key="i">
        <span class="flex-2 f-20 c-696969">{{ item.created_at }}</span>
        <span class="flex-1 f-22">{{ $i18n.t("money") }}{{ item.amounts }}</span>
        <span class="flex-1 f-22">{{ $i18n.t("money") }}{{ item.poundage }}</span>
        <span class="flex-1  f-22 c-F51D1D text-right">{{ item.status_name }}</span>
      </div>
    </main>
    <van-empty v-else description="暂无提现记录"></van-empty>
  </div>
</template>

<script>
import { scrollMixin } from "../../../utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      list: [],

      isLoadMore: true,
      current_page: 1,
      last_page: 1
    };
  },
  activated() {
    this.isLoadMore = true;
    this.current_page = 1;
    this.last_page = 1;
    this.getData();
  },
  methods: {
    async getData() {
      let { result, msg, data } = await $http.get("plugin.sign-buy.frontend.sign-buy-app.withdraw-log", {}, ".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.list = data.data;
      this.current_page = data.current_page;
      this.last_page = data.last_page;
    },
    async getMoreData() {
      if (this.current_page >= this.last_page) {
        return;
      }
      this.isLoadMore = false;
      let page = this.current_page + 1;
      let { result, msg, data } = await $http.get("plugin.sign-buy.frontend.sign-buy-app.withdraw-log", { page }, ".");
      this.isLoadMore = true;
      if (result == 0) return this.$toast(msg);
      this.list = this.list.concat(data.data);
      this.current_page = data.current_page;
    }
  }
};
</script>

<style scoped lang="scss">
.sigin-in-subscribe-details {
  .box {
    background: #fff;
    display: flex;
    align-items: center;
    border-radius: 0.3125rem;
    padding: 0.9375rem 0.7813rem;
    margin-bottom: 0.625rem;
  }

  .text-right {
    text-align: right;
  }

  .f-26 {
    font-size: 0.8125rem;
  }

  .f-22 {
    font-size: 0.6875rem;
  }

  .f-20 {
    font-size: 0.625rem;
  }

  .c-F51D1D {
    color: #f51d1d;
  }

  .c-696969 {
    color: #696969;
  }

  .flex-1 {
    flex: 1;
  }

  .flex-2 {
    flex: 2;
  }

  .list {
    display: flex;
    padding-top: 0.9375rem;
    font-size: 0.8125rem;
  }

  .main {
    padding: 0.625rem;
  }
}
</style>
